import React, { Component } from 'react';
import {MessageBox,Label} from 'iftide';
import {
    TouchableOpacity,
    Image,
    StyleSheet,
    View,
    ScrollView,
    Text
} from 'react-native';

export default class MessageBox_Demo extends Component {
    constructor() {
        super();
    };

    onClick(type){
        //若使用MessageBox.show({...})的方式打开组件，关闭组件则可使用MessageBox.hide()
        let htmlStr = "<meta name='viewport' content='width=device-width, initial-scale=1'>欢迎访问测试123456789测试是否换行欢迎访问测试欢迎访问测试123456789测试是否换行欢迎访问测试我是sss<br/>sss<br/>sss<br/><br><span style='font-size:18px'>设置</span><h2 style='color:#ff0000'>欢迎访问测试123456789测试是否换行欢迎访问测试https://xxx.xxx.cn 欢迎访问测试https://xxx.xxx.cn欢迎访问测试https://xxx.xxx.cn!!!sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>"
        let htmlUrl = require('./demo.html');
        let detailComponent=(
        <View style={{marginLeft:17,marginRight:17,marginTop:10}}>
            <Text style={{lineHeight:15}}>欢迎访问测试123456789测试是否换行欢迎访问测试欢迎访问欢迎访问测试欢迎访问测试<Text style={{color:'red'}}>100万元</Text>欢迎访问测试123456789测试是否换行欢迎访问测试欢迎访问测试欢迎访问测试</Text>
            <TouchableOpacity>
                <View style={{flexDirection:'row',justifyContent:'flex-end',marginLeft:17,marginRight:17}}>
                    <Text style={{color:"#999",marginRight:5,marginBottom:10,lineHeight:15}}>今日不再提示</Text>
                    <Image source={require('./cb_enabled_right.png')} resizeMode="contain" style={{width:18,height:18}}/>
                </View>
            </TouchableOpacity>
        </View>);
        switch (type){
            case 'type11':
                MessageBox.show({
                    alertType:1,
                    title:'标题标题',
                    detailText:'ADSSFSADFASDF提示内容内容内容提示内容内提示内容内容内容示内容内容内容提提示内容提示内容内容内容提提示内容提提示内容提示内容内容内容提提示内容提示内容内容内容提示内容内提示内容内容内容示内容内容内容提提示内容提示内容内容内容提提示内容提提示内容提示内容内容内容提提示内容!!',
                    onClose:() => {
                        alert('dsfasf');
                    }
                })

                break;
            case 'type22':
                MessageBox.show({
                    alertType:2,
                    boxWidth: 300,
                    title:'确认消息弹窗',
                    detailText:'提示内容内容内容!!!',
                    detailTextAlign: 'center',
                    footerLeftText:'忽略',
                    footerRightText:'继续',
                    onClose:() => {
                        alert('确认消息弹窗忽略');
                    },
                    onConfirm:() => {
                        alert('确认消息弹窗继续');
                    }
                });
                break;
            case 'type2-11':
                MessageBox.show({
                    alertType:2,
                    detailText:'提示内容内容内容提示内容内提示内容内容内容示内容内容内容提提示内容提示内容内容内容提提示内容提提示内容提示内容内容内容提提示内容!!!',
                    hasTitle:false,
                    //detailTextContainerStyle:{backgroundColor:'#EEE'},
                    onClose:() => {
                        alert('确认消息弹窗忽略');
                    },
                    onConfirm:() => {
                        alert('确认消息弹窗继续');
                    }
                });
                break;
            case 'type2-22':
                MessageBox.show({
                    alertType:2,
                    title: '确认消息弹窗-自定义内容',
                    footerLeftText: '忽略',
                    footerRightText: '继续',
                    detailComponent: detailComponent,
                    onClose: () => {
                        alert('2_2_2取消回调函数执行')
                    },
                    onConfirm: () => {
                        alert('_2_2_2确认回调函数执行')
                    }
                });
                break;
            case 'type33':
                MessageBox.show({
                    alertType:3,
                    type : 'login-password',
                    title:'输入消息弹窗',
                    //detailText:'提示内容',
                    placeholder1: '账号',
                    placeholder2: '密码',
                    onClose:() => {
                        alert('输入消息弹窗忽略');
                    },
                    onConfirm:() => {
                        alert('输入消息弹窗继续');
                    }
                });
                break;
            case 'type44':
                MessageBox.show({
                    alertType:4,
                    title:'登录失败',
                    detailText:'你已经输入了3次密码了！都输错了！您到底还记不记得密码了？！',
                    buttonTextOne:'AAA',
                    buttonTextTwo:'BBB',
                    buttonTextThree:'CCC',
                    onCloseOne:() => {
                        alert('onCloseOne回调');
                    },
                    onCloseTwo:() => {
                        alert('onCloseTwo回调');
                    },
                    onCloseThree:() => {
                        alert('onCloseThree回调');
                    }
                });
                break;
            case 'type5-11':
                MessageBox.show({
                    alertType:5,
                    title:'条款与协议',
                    detailText:'提示内容内容内容提示内容内提示内容内容内容提示内容内提示内容内提示内容内！',
                    onClose:() => {
                        alert('取消回调函数执行');
                    },
                    onConfirm:() => {
                        alert('确认回调函数执行');
                    }
                });
                break;
            case 'type5-22':
                MessageBox.show({
                    alertType:5,
                    title:'条款与协议',
                    showType:'dialog',
                    detailText:'提示内容内容内容提示内容内提示内容内容内容提示内容内提示内容内提示内容内！',
                    footerLeftText:'忽略',
                    footerRightText:'继续',
                    onClose:() => {
                        alert('取消回调函数执行');
                    },
                    onConfirm:() => {
                        alert('确认回调函数执行');
                    }
                });
                break;
            case 'type5-33':
                MessageBox.show({
                    alertType:5,
                    title:'条款与协议',
                    htmlStr:htmlStr,
                    onClose:() => {
                        alert('取消回调函数执行');
                    },
                    onConfirm:() => {
                        alert('确认回调函数执行');
                    }
                });
                break;
            case 'type5-44':
                MessageBox.show({
                    alertType:5,
                    title:'条款与协议',
                    showType:'dialog',
                    htmlUrl:htmlUrl,
                    showConfirm:false,
                    onClose:() => {
                        alert('取消回调函数执行');
                    },
                    onConfirm:() => {
                        alert('确认回调函数执行');
                    }
                });
                break;
        }
    }

    getButton(text,type) {
        let buttonDom;
        if(text !== 'info_btn'){
            buttonDom = (
                <TouchableOpacity
                    style={{padding: 10}}
                    onPress={() => this.onClick(type)}>
                    <Label text={text} type={'title'}></Label>
                </TouchableOpacity> )

        }else{
            buttonDom = (
                <TouchableOpacity
                    style={{padding: 10}}
                    onPress={() => this.onClick(type)}>
                    <Image  style={{height:20,width:20}} source={require('./info_btn.png')}/>
                </TouchableOpacity> )
        }
        return (
            buttonDom
        )
    }

    showMessageBox(){
        this.messageBox1._show();
    }

    render() {
        //该组件的调用方式分为两种，一种是直接在需要显示弹框的操作中通过MessageBox.show({...})方式，
        //另外一种是先定义好组件，然后在需要的时候通过this.messageBox._show()使其显示出来,关闭使用_close()
        return (
            <View>
                <ScrollView>
                    <Label text={'组件调用方式1：直接调用'}/>
                    <View style={styles.container}>
                        {this.getButton('info_btn','type11')}
                        {this.getButton('确认消息弹窗','type22')}
                        {this.getButton('确认消息弹窗-无标题','type2-11')}
                        {this.getButton('确认消息弹窗-自定义内容','type2-22')}
                        {this.getButton('输入消息弹窗','type33')}
                        {this.getButton('消息弹窗-3按钮竖排','type44')}
                        {this.getButton('协议提示格式一','type5-11')}
                        {this.getButton('协议提示格式二','type5-22')}
                        {this.getButton('协议提示html格式一','type5-33')}
                        {this.getButton('协议提示html格式二','type5-44')}
                    </View>
                    <Label text={'组件调用方式2：通过组件调用'}/>
                    <View style={styles.container}>
                        <TouchableOpacity
                            style={{padding: 10}}
                            onPress={() => this.showMessageBox()}>
                            <Label text={'点击显示MessageBox组件'} type={'title'}></Label>
                        </TouchableOpacity>
                        <MessageBox
                            ref={(obj) =>{this.messageBox1 = obj}}
                            alertType = {1}
                            title={'标题标题'}
                            buttonText={'继续'}
                            detailText={'提示内容提示内容!!!'}
                            boxWidth={280}
                            detailTextStyle={{fontSize:12,color:'#3399FF'}}
                            buttonTextStyle = {{color:'#EA4940'}}
                            onClose={() => {
                                alert('1回调函数执行')
                            }}
                        />
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //justifyContent: 'center',
        alignItems: 'center',
    },
});